<template>
  <div>

    <el-card>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['shopping:supplier:addsi']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['shopping:supplier:editsi']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['shopping:supplier:removesi']"
          >删除</el-button>
        </el-col>

        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>



      <div>
        <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="店铺名称" align="center">
            <template slot-scope="scope">
              <router-link :to="'/goods/type/dataSp/' + scope.row.supplierId" class="link-type">
                <span>{{ scope.row.shopsName }}</span>
              </router-link>
            </template>
          </el-table-column>
          <el-table-column label="供应商编码" align="center" prop="supplierCode" />
          <el-table-column label="供应商名称" align="center" prop="supplierName" />
          <el-table-column label="供应商类型" align="center" >
            <template slot-scope="scope">
              {{scope.row.supplierType=='1' ? '自营签约门店' : '平台签约门店'}}
            </template>
          </el-table-column>
          <el-table-column label="店铺类型" align="center" prop="supplierTypeform" >
            <template slot-scope="scope">
              {{scope.row.supplierTypeform=='1' ? '物品' : '技术'}}
            </template>
          </el-table-column>
          <el-table-column label="供应商联系人" align="center" prop="linkMan" />
          <el-table-column label="联系电话" align="center" prop="phoneNumber" />
          <el-table-column label="供应商开户银行名称" align="center" prop="bankName" />
          <el-table-column label="银行账号" align="center" prop="bankAccount" />
          <el-table-column label="供应商地址" align="center" prop="address" />
          <el-table-column label="状态" align="center" >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.supplierStatus"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>

          <el-table-column label="用户账号" align="center" prop="userName" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['shopping:supplier:editsi']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['shopping:supplier:removesi']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>


        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

      </div>

      <el-dialog :title="title" :visible.sync="open"  width="500px" append-to-body >
        <el-form ref="form" :model="form" label-width="100px">


          <el-form-item label="店铺名称" prop="shopsName">
            <el-input v-model="form.shopsName" placeholder="请输入店铺名称" />
          </el-form-item>

          <el-form-item label="供应商名称" prop="supplierName">
            <el-input v-model="form.supplierName" placeholder="请输入供应商名称" />
          </el-form-item>


          <el-form-item label="供应商联系人" prop="linkMan">
            <el-input v-model="form.linkMan" placeholder="请输入供应商联系人" />
          </el-form-item>
          <el-form-item label="联系电话" prop="phoneNumber">
            <el-input v-model="form.phoneNumber" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item label="供应商开户银行名称" prop="bankName">
            <el-input v-model="form.bankName" placeholder="请输入供应商开户银行名称" />
          </el-form-item>
          <el-form-item label="银行账号" prop="bankAccount">
            <el-input v-model="form.bankAccount" placeholder="请输入银行账号" />
          </el-form-item>
          <el-form-item label="供应商地址" prop="address">
            <el-input v-model="form.address" placeholder="请输入供应商地址" />
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确  定</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>

      </el-dialog>


    </el-card>


  </div>
</template>

<script>

  import { listInfosi, getInfosi, delInfosi, addInfosi, updateInfosi, typeStatus } from "@/api/shopping/goods";

  export default {
    name: "Goods",
    data(){
      return{

        //显示搜索条件
        showSearch: true,
        // 遮罩层
        loading: true,
        // 参数表格数据
        infoList:[],
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 弹出层标题
        title: "",
        open: false,
        // 日期范围
        dateRange: [],
        // 总条数
        total: 0,
        form:{ },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          supplierCode: null,
          supplierName: null,
          supplierType: null,
          supplierTypeform: null,
          linkMan: null,
          phoneNumber: null,
          bankName: null,
          bankAccount: null,
          address: null,
          supplierStatus: null,
          modifiedTime: null,
          shopsName: null,
          customerId: null
        },
      }
    },

    methods:{
      // 表单重置
      reset() {
        this.form = {
          supplierId: null,
          supplierCode: null,
          supplierName: null,
          supplierType: null,
          supplierTypeform: null,
          linkMan: null,
          phoneNumber: null,
          bankName: null,
          bankAccount: null,
          address: null,
          supplierStatus: 0,
          modifiedTime: null,
          shopsName: null
        }

      },

      getList(){
        this.loading = true,
          listInfosi(this.queryParams).then(res=>{
            this.infoList = res.rows;
        this.total = res.total;
        this.loading = false;
      })
      },

      handleSelectionChange(selection){
        this.ids = selection.map(item => item.supplierId)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },

      handleAdd(){
        this.reset();
        this.open = true; ``
        this.title="添加店铺"
      },

      handleUpdate(row){
        this.reset();
        const  supplierId = row.supplierId || this.ids
        getInfosi(supplierId).then(res=>{
          this.form = res.data;
        this.open = true;
        this.title = "修改店铺信息"
      })
      },

      submitForm(){
        this.$refs["form"].validate(valid=>{
          if (valid){
            if(this.form.supplierId != null){
              updateInfosi(this.form).then(res=>{
                if (res.code === 200){
                this.msgSuccess("修改数据成功");
                this.open = false;
                this.getList();
              }
            });
            }else{
              addInfosi(this.form).then(res=>{
                if(res.code === 200){
                this.msgSuccess("新增数据成功");
                this.open = false;
                this.getList();
              }
            })
            }
          }
        })

      },

      handleDelete(row){
        const supplierId =  row.supplierId || this.ids;
        this.$confirm('是否删除店铺信息为"'+supplierId+'"的数据项',"警告",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delInfosi(supplierId);
        }).then(()=>{
          this.getList();
        this.msgSuccess("删除数据成功");
      }).catch(function () {});
      },

      cancel(){
        this.open=false;
        this.reset();
      },


      handleStatusChange(row) {
        let text = row.supplierStatus === "0" ? "启用" : "停用";
        this.$confirm(
          '确认要"' + text + '" 用户吗?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(function () {
          return typeStatus(row.supplierId, row.supplierStatus);
        }).then(() => {
          this.msgSuccess(text + "成功");
      }).catch(function () {
          row.supplierStatus = row.supplierStatus === "0" ? "1" : "0";
        });
      },





    },
    components:{

    },
    created(){
      this.getList();
    }

  }
</script>

<style>
</style>
